﻿@model IceTea.Domain.Models.Product

@using IceTea.Infrastructure;

@{
    ViewBag.Title = "Create New Product";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
    
@using(Html.BeginForm("CreateNew", "Product", FormMethod.Post, new{@class="form-horizontal", @role="form"})){
        
    <div class="control-group">@Html.ValidationSummary()</div>
        
    <div class="col-md-12">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab" id="tabhead1">Basic Information</a></li>
            <li><a href="#tab2" data-toggle="tab" id="tabhead2">Product Vision</a></li>
        </ul>
        <div class="col-md-12"><p></p></div>
        <div class="tab-content">
            <div class="tab-pane active" id="tab1">
            <!-- Project Name -->
                <div class="form-group">
                    @Html.LabelFor(p => p.Name, new { @class="control-label col-md-2"}) 
                <div class="col-md-9">
                    @Html.TextBoxFor(p => p.Name, new{@class="form-control", @autofocus="autofocus"})
                </div>
                    <div class="col-md-1"><span class="glyphicon glyphicon-asterisk"></span></div>
                </div>
            <!-- Project Description -->
                <div class="form-group">
                    @Html.LabelFor(p => p.Description, new { @class="control-label col-md-2"})
                <div class="col-md-9">
                    @Html.TextAreaFor(p => p.Description, 5, 20, 
                            new{@class="form-control"})
                </div></div>

                <!-- Sprint duration -->
                <div class="form-group">
                    @Html.LabelFor(p => p.SprintDuration, new { @class="control-label col-md-2"})
                <div class="col-md-9">
                    @Html.DropDownListFor(p => p.SprintDuration, 
                        new List<SelectListItem>(){
                            new SelectListItem(){ Text="One Week", Value="1"},
                            new SelectListItem(){ Text="Two Week", Value="2", Selected=true},
                            new SelectListItem(){ Text="Three Week", Value="3"},
                            new SelectListItem(){ Text="Four week", Value="4"},},
                            new{@class="form-control"})
                </div></div>

                <div class="col-md-8">
                    <ul class="pager">
                        <li class="next"><a href="#" id="btnnexttab">Next &rarr;</a></li>
                    </ul>
                </div>
            </div>

            <div class="tab-pane" id="tab2">
                <!-- Project vision -->
                <div class="form-group">
                    @Html.LabelFor(p => p.Vision, new{@class="control-label col-md-2"})
                    <div class="col-md-9">
                        @Html.TextAreaFor(p => p.Vision, 8, 20,
                            new{@class="form-control"})
                    </div>
                </div>
                <div class="col-md-8">
                    <ul class="pager">
                        <li class="previous"><a href="#" id="btnpretab">&larr; Previous</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
        
    <div class="form-group">
        <div class="col-md-8 col-md-offset-2">
            <button type="submit" class="btn btn-success">Create</button>
            
            @Html.ActionLink("Cancel", "Index", "Product", null, new { @class = "btn btn-default" })
            </div>
    </div>

    }


<script type="text/javascript">
    $("#btnnexttab").click(function () {
        $("#tabhead2").click();
    });
    $("#btnpretab").click(function () {
        $("#tabhead1").click();
    });
</script>
